<template>
  <transition
      :duration="{ enter: 1800, leave: 300 }"
      @after-enter="afterEnter"
      @after-leave="afterLeave"
  >
    <div class="toast" v-if="show"><span>{{ content }}</span></div>
  </transition>
</template>

<script>
import {onMounted, ref} from 'vue'

export default {
  name: "Toast",
  props: {
    content: String,
    onDismiss: Function
  },
  setup(props) {
    const {content, onDismiss} = props;
    const show = ref(false)
    const afterEnter = () => {
      show.value = false
    }
    const afterLeave = () => {
      if (onDismiss) {
        onDismiss()
      }
    }
    onMounted(() => {
      show.value = true
    })
    return {
      show,
      content,
      afterEnter,
      afterLeave
    }
  }
}
</script>

<style scoped>

.toast {
  position: absolute;
  top: 45%;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  z-index: 2;
  pointer-events: none;
  transform: translateY(-50%);
}

span {
  transition: all 0.2s;
  font-size: 13px;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.7);
  padding: 10px;
  border-radius: 6px;
  text-align: center;
  max-width: 260px;
}

.v-enter-from span {
  opacity: 0;
  transform: scale(0.5);
}

.v-leave-to span {
  opacity: 0;
  transform: translateY(-20px);
}
</style>
